<template>
 <div>

	<section class="header text-center">
		<nav class="navbar navbar-expand-lg  navbar-custom">
			<div class="container"><a class="navbar-brand" href="/"><i class="fas fa-shopping-bag primary-color mr-1"></i>{{$t('m.index')}}</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
				<div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
					<ul class="navbar-nav mt-2 mt-md-0">
						<li class="nav-item active"><a class="nav-link" href="#">{{$t('m.home')}}<span class="sr-only">(current)</span></a></li>
						<li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.shop')}} </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<div class="container">
									<div class="divider"></div>
									<div class="row">
										<div class="col-md-2">
											<h6 class="text-uppercase">{{$t('m.shopdict.women')}}</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">{{$t('m.shopdict.men')}}</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">{{$t('m.shopdict.girl')}}</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">{{$t('m.shopdict.boy')}}</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-4">
											<h6 class="text-uppercase">Featured Items</h6>
											<div class="row">
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
                            <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.pages')}} </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">{{$t('m.pagesdict.homepage')}}</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="catalog.html">{{$t('m.pagesdict.catalog')}}</a>
                                    <a class="dropdown-item" href="item.html">{{$t('m.pagesdict.itemdetail')}}</a>
                                    <a class="dropdown-item" href="cart.html">{{$t('m.pagesdict.cart')}}</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="contact.html">{{$t('m.pagesdict.contact')}}</a>

                                </div>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="contact.html">{{$t('m.contact')}}</a></li>
					<li class="nav-item dropdown">

						<!--搜索功能-->
						<Search @search="search" v-model="text" ></Search>

						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">3</span></a>
							<div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
								<h6>3 Items <span class="emphasis">$147.00</span></h6>
								<div class="dropdown-divider"></div>
								<ul class="shopping-cart-items">
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
								</ul>
								
								<a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
						</li>
					</ul>
				</div>

			<div v-if='username==""'>
				
				<router-link to='/login'>{{$t('m.login')}}</router-link>

				<br>

				<router-link to='/register'>{{$t('m.register')}}</router-link>
			</div>

			<div v-else>

				{{$t('m.welcome')}}：<router-link to='/myprofile'>{{username}}</router-link>
				&nbsp;&nbsp;
				<Button color='red' @click="logout">{{$t('m.logout')}}</Button>

			</div>


			</div>


            <div>

				<!-- 开关标签 -->
				<h-switch @change="lang_change" v-model="lang">{{$t('m.chinese')}}/{{$t('m.english')}}</h-switch>

				<!-- 暗黑模式开关 -->
				<h-switch @change="dark_mode" v-model="mode">暗/亮</h-switch>
			</div>


		</nav>
	</section>


 </div>
</template>

<script>
export default {
 data() {
  return {
	  
	  username:'',
	  
	  //开关变量
	  lang:1,

	  //暗黑模式变量
	  mode:1,

	  //检索关键词
	  text:"",

  }
 },
 components: {

 },

//监听属性，监测页面变化
watch:{

	$route(to,from){

		//手动刷新
		this.$router.go(0);

	}

},
 mounted() {




	 this.iflang();
	 
	 //调用判断暗黑模式方法
	 this.ifdark();


	// if (navigator.language == 'en'){
    //     this.$i18n.locale = 'en'
	// }else{
	// 	this.$i18n.locale = 'zh'
	// }
	

	
	//接收三方参数
	var sina_id = this.$route.query.sina_id
	var user_id = this.$route.query.uid

	if(sina_id){
		//自动帮用户进行登陆操作
		localStorage.setItem('username',sina_id)
		localStorage.setItem('uid',user_id)
	}

	//判断是否登陆
	var uname = localStorage.getItem('username')

	if (uname == null){
		
		//没登陆
		this.username = ''
	}else{

		//登陆
		this.username = uname
	}
 },
 methods: {

	//检索方法
	search:function(){

		//获取输入的关键词
		console.log(this.text);

		//进行跳转操作 带参数
		this.$router.push({path:'/search',query:{text:this.text}});



	},


	 //判断暗黑模式
	 ifdark(){
		
		 var darkmode = localStorage.getItem('darkmode')

				 
			if(darkmode!='1'){

				this.mode = 0

				this.dark_mode()

			}
			 

	 },


	 //切换暗黑模式
	 dark_mode(){
		
		 //获取样式表
		 var styles = getComputedStyle(document.documentElement);

		 if(this.mode == 1){
		  //亮
		  document.documentElement.style.setProperty('--bg-color','white');

		  document.documentElement.style.setProperty('--a-color','black');

		  localStorage.setItem('darkmode','1')
		 }else{

		  //暗
		  document.documentElement.style.setProperty('--bg-color','#292a2d');

		  document.documentElement.style.setProperty('--a-color','white');
		  localStorage.setItem('darkmode','0')
		 }

	 },



	 //判断语言
	 iflang(){
		 var lang_locale = localStorage.getItem('lang')
		 
         if(lang_locale){

			 this.$i18n.locale = lang_locale

			 if(lang_locale == 'zh'){
				 this.lang = 1;
			 }else{
				 this.lang = 0;
			 }

		 }else{
			 this.$i18n.locale = 'zh'
			 this.lang = 1;
		 }
	 },


	 //切换语言
	 lang_change(){
		


		 if(this.lang == true){

			 //中文
			 this.$i18n.locale ='zh';

			 localStorage.setItem('lang','zh')
		 }else{
			 //英文
			 this.$i18n.locale ='en';
			 localStorage.setItem('lang','en')

		 }

	 },




	 logout(){
		 localStorage.removeItem('uid')
		 localStorage.removeItem('username')
		 this.username = ''

		 //跳转
		 this.$router.push('/')
	 }
 },
}
</script>

<style>

</style>

